<template>
  <div class="real-name-mode">
    <van-nav-bar :border="false" placeholder fixed>
      <template #left>
        <svg-icon name="arrows" @click="topReturnClick" />
      </template>
      <template #title>
        <span class="title-name">选择个人实名认证方式</span>
      </template>
    </van-nav-bar>
    <div class="describe">为满足业务需求,请进行个人实名认证</div>
    <div class="cell" @click="selectAttestationTypeClick('phone')">
      <svg-icon name="phone-authentication" />
      <div>
        <div class="middle-top">手机运营商认证</div>
        <div class="middle-bottom">请准备身份证和本人实名的手机号码</div>
      </div>
      <van-icon name="arrow" size="20" color="#CECECE" />
    </div>
    <div class="cell" @click="selectAttestationTypeClick('face')">
      <svg-icon name="face-recogniton" />
      <div>
        <div class="middle-top">
          人脸识别认证 <span class="recommend">推荐</span>
        </div>
        <div class="middle-bottom">未带身份证时,请直接使用刷脸认证</div>
      </div>
      <van-icon name="arrow" size="20" color="#CECECE" />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useRouter, useRoute } from 'vue-router'
export default defineComponent({
  setup() {
    const router = useRouter()
    const route = useRoute()
    const topReturnClick = () => {
      router.go(-1)
    }

    const selectAttestationTypeClick = (type: string) => {
      if (type === 'phone') {
        router.push({
          path: '/real-name',
          query: {
            contractId: route.query.contractId,
            type: 'phone'
          }
        })
      } else if (type === 'face') {
        router.push({
          path: '/real-name',
          query: {
            contractId: route.query.contractId,
            type: 'face'
          }
        })
      }
    }
    return { topReturnClick, selectAttestationTypeClick }
  }
})
</script>

<style scoped lang="less">
.real-name-mode {
  width: 100%;
  height: 100%;
  .title-name {
    font-size: 17px;
    color: #101010;
    font-weight: 700;
  }
  .describe {
    height: 32px;
    line-height: 32px;
    padding: 0 20px;
    font-size: 13px;
    color: #999999;
  }
  .cell {
    height: 90px;
    margin: 0 20px 10px;
    padding: 0 20px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .middle-top {
      margin-bottom: 10px;
      font-size: 15px;
      font-weight: 700;
      color: #101010;
      .recommend {
        display: inline-block;
        background-color: #ff9933;
        vertical-align: middle;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        padding: 3px 5px;
        margin-left: 10px;
        font-size: 10px;
        font-weight: 400;
        color: #fff;
      }
    }
    .middle-bottom {
      font-size: 12px;
      color: #999;
    }
  }
  .cell:active {
    background-color: #f2f3f5;
  }
}
</style>
